<template>
	<div class="skin_list">
		<!-- 个性换肤 -->
        <div class='free_nav'>
			<router-link to="/layout/found"><img src="../../../assets/icon-close45.png"></router-link>		
			<span>皮肤中心</span>
		</div>
		<!-- .......................................................................... -->
		<div class="index_nav">
			<ul>
				<li><a href="javascript:;">推荐</a></li>
				<li><a href="javascript:;">明星</a></li>
				<li><a href="javascript:;">卡通</a></li>
				<li><a href="javascript:;">个性</a></li>
				<li><a href="javascript:;">纯色</a></li>
			</ul>
			
		</div>
<!-- ............................................................................. -->

      <div class="skin_pc">
	      	<div >
	      		<img src="../../../assets/9230.360.png">
	      		<p>自定义</p>
	      	</div>
	      		<div >
	      		<img src="../../../assets/4230.360.png">
	      		<p>魔笛幻彩</p>
	      	</div>
	      		<div >
	      		<img src="../../../assets/1230.360.png">
	      		<p>古风古韵</p>
	      	</div>
	      		<div >
	      		<img src="../../../assets/8230.360.png">
	      		<p>听音乐学英语</p>
	      	</div>
	      		<div >
	      		<img src="../../../assets/2230.360.png">
	      		<p>儿童读物</p>
	      	</div>
	      		<div >
	      		<img src="../../../assets/5230.360.png">
	      		<p>美少女吧</p>
	      	</div>
      </div>
      <div class="skin_foot">
      		<div>
	      		<img src="../../../assets/skin-7.png">
	      	</div>
	      	<div>
	      		<img src="../../../assets/skin-5.png">
	      	</div>
	      	<div>
	      		<img src="../../../assets/skin-6.png">
	      	</div>
      </div>
      <!-- ........................................... -->
     <!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../../components/music_player'
	export default {
		name:'changeSkin',
		data(){
			return{
				
			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="Less">
.skin_list{
	overflow: hidden;
	padding-bottom: 98/100rem;
}
.free_nav{
	width: 100%;
	height: 88 / 100rem;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../../../assets/daohang.png');
	background-size: 100%;
}

.free_nav img{
	width: 40 / 100rem;
	height: 40 / 100rem;
	display: inline-block;
    margin-left: 20 / 100rem;
    margin-top:  26 / 100rem;

}
.free_nav span{
	display: inline-block;
	margin-left: 238 / 100rem;
	font-size: 36 / 100rem;
	color: #ffffff;
}
/*.box{
	width: 100%;
	height: 10 / 100rem;
}*/
.index_nav{
	width: 100%;
	height: 30 / 100rem;

}
.index_nav ul{
	width: 660 / 100rem;
	height: 30 / 100rem;
	/*background-color: red;*/
	margin: 0 auto;
	margin-top: 120 / 100rem;
	
}
.index_nav ul li{
   float: left;
   font-size: 30 / 100rem;
   color: #333333;
}
.index_nav ul li:nth-child(2),.index_nav ul li:nth-child(3),.index_nav ul li:nth-child(4),.index_nav ul li:nth-child(5){
	margin-left: 90 / 100rem;
}
/*........................................................................*/
.skin_pc{
	width: 714 / 100rem;
	margin: 0 auto;
	margin-top: 20 / 100rem;
	margin-bottom: 40 / 100rem;
	overflow: hidden;
}
.skin_pc div{
    width:  230 / 100rem;
    height: 400 / 100rem;
    float: left;
}
.skin_pc div:nth-child(4),.skin_pc div:nth-child(5),.skin_pc div:nth-child(6){
	margin-top: 40 / 100rem;
}
.skin_pc div:nth-child(2),.skin_pc div:nth-child(3),.skin_pc div:nth-child(5),.skin_pc div:nth-child(6){
   margin-left: 12 / 100rem;
}
.skin_pc div p{
	margin-top: 7 / 100rem;
	text-align: center;
	font-size: 30 / 100rem;
	color: #333333;
}
.skin_pc_first{
	position: relative;
	background-color: #dad8de;
}
.skin_pc img{
  width:  230 / 100rem;
  height: 360 / 100rem;
}
.skin_foot{
	width: 714 / 100rem;
	margin: 0 auto ;
	height: 168 / 100rem;
}
.skin_foot div{
	width: 230 / 100rem;
	height: 165 / 100rem;
	float: left;
}
.skin_foot div:nth-child(2),.skin_foot div:nth-child(3){
	margin-left: 12 / 100rem;
}
.skin_foot img{
	width: 230 / 100rem;
	height: 165 / 100rem;
}
</style>